<template>
	<view class="container">
		<!-- Modified 0414 18:09 -->
		<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" 
			collection="NeuHelper-Posts" :where="udbWhere" field="_id, title, category_id" 
			loadtime="manual" @load="isLoading == false" @error="isLoading == false" >
			<!-- :page-size="10" -->
			<uni-list>
				<uni-list-item v-for="(item, index) in data" :key="index" :clickable="true"
					@click="handleItemClick(item)">
					<template v-slot:body>
						<view class="item">
							<text>{{item.title}}</text>
							<!-- 上次阅读时间显示 - 本地缓存暂未配置last_time属性 -->
							<uni-dateformat class="article-date" :date="readNewsLog[index].last_time" 
								format="yyyy-MM-dd hh:mm" :threshold="[0, 0]" />
						</view>
					</template>
				</uni-list-item>
			</uni-list>
			<uni-load-state @networkResume="refreshData" :state="{data,pagination,hasMore, loading, error}"></uni-load-state>
		</unicloud-db>
	</view>
</template>

<script>
	const db = uniCloud.databaseForJQL();
	export default {
		data() {
			return {
				isLoading: true,
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: '',
				},
				/**
				 * 本地'readNewsLog'缓存经JSON.parse()所得对象 
				 */
				readNewsLog: [],
				/**
				 * 帖子列表查询条件
				 * 用于限定只查询本地缓存中阅读过的帖子
				 */
				udbWhere: ''
				// colList: []
			}
		},
		async onLoad() {
			// 页面加载时，读取本地缓存作为帖子表查询条件
			// readNewsLog: Array
			console.log("before getStorageSync");
			this.readNewsLog = uni.getStorageSync('readLog') || ["null"];
			
			console.log("readNewsLog: ", this.readNewsLog);
			console.log(JSON.stringify(this.readNewsLog));
			// colList = [db.collection("NeuHelper-Posts")
			// 	.where(`_id in ${JSON.stringify(this.readNewsLog)}`)
			// 	.field("_id, title, category_id").getTemp()
			// ];
			
			// let udbRlt = await db.collection("NeuHelper-Posts")
			// 	.where(`_id in ${JSON.stringify(this.readNewsLog)}`)
			// 	.field("_id, title, category_id").get();
			// console.log(udbRlt.data);
			this.udbWhere = `_id in ${JSON.stringify(this.readNewsLog)}`; //作为数据库查询条件，需要JSON.stringify
			console.log(this.udbWhere);
			
			uni.getStorageInfo({
				success: function (res) {
					console.log("STORAGE INFO: ");
					console.log(res.keys);
					console.log(res.currentSize);
					console.log(res.limitSize);
				}
			});
			
			// let readNewsLogIds = this.readNewsLog.map(({article_id}) => article_id);
			// console.log("readNewsLogIds: ", readNewsLogIds);
			// console.log("JSON.stringify(readNewsLogIds) : ", JSON.stringify(readNewsLogIds));
			//this.udbWhere = `_id in ${JSON.stringify(readNewsLogIds)}`
			
			uni.setNavigationBarTitle({
				title: this.$t('newsLog.navigationBarTitle')
			});
			
			// 组件上配置了 loadtime = "manual", 这里需要手动加载数据
			this.$nextTick(() => {
				this.$refs.udb.loadData()
			})
		},
		onPullDownRefresh() {
			this.refreshData();
		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		methods: {
			refreshData() {
				this.$refs.udb.loadData({
					clear: true
				}, (res) => {
					uni.stopPullDownRefresh()
				})
			},
			/**
			 * Modified 0414 18:09
			 * 阅读列表点击事件处理
			 * @param {Object} item 帖子列表查询到的单条结果
			 */
			handleItemClick(item) {
				uni.navigateTo({
					url: '/pages/list/detail?postId=' + item._id + '&catId=' + item.category_id,
					animationType: 'auto'
				})
				// 需在InquiryInfo.vue和campusDetails.vue中更新本地缓存
			}
		}
	}
</script>

<style>
	.item{
		display: flex;
		flex-direction: column;
	}
	.article-date {
		color: #C8C7CC;
	}
</style>
